<template>
 <view class="content">
 	<view class="wordui">
     <view>
       {{arrTempHead[0].word}}
     </view>
   </view>
   <view class="choicesum">
     <view class="choice concert" v-for="item,index in arrTempmeaning" :key="index" @click="chooseItem(item,index)" ref="color">
       <view v-if="Array.isArray(item)">
               <view class="choice" v-for="it,index in item" :key = "index">
                   {{it}}
               </view>
       </view>
       <view v-else class="concert">
              {{item}}
       </view>
     </view>
   </view>
   <view class="under" @click="answer()">
	   毫无压力>>
   </view>
 </view>
</template>

<script>
 import token from '../../utils/Token.js'
 import time from '../../utils/Storage.js'
 import api from '../../utils/jiekou.js'
   const {sublevel}=token;
   const {ranker}=token;
   const {equal}=token;
   const {wordSend}=token;
   const {timeDay} = time;
   const {setTime} = time;
   const {wrongWord} = api
   const {getWrongWord} = api
   const {delectWrongWord} =api
  export default {
    data() {
      return {
        arrShow:[],
        arrTemp:[],
        arrTempHead:[],
        arrOld:[],
        arrNew:[],
        arrTempmeaning:[],
        repeatCount:[],
        arrShowFu:[],
        rankSize:20,
		dui:{}
      }
    },
    onLoad() {
      // this.getWordArr();
      // this.duie();
    },
    onShow() {
      this.getWordArr();
    },
    onHide() {
      
    },
    methods: {
		//初始四数据
  //     duie(){
		// 	this.dui={ "rows": [ { "symbols": "græm", "word": "gramme", "meaning": "n.克(重量单位) =gram", "id": 1151, "count": 0 }, { "symbols": "in'evitəbl", "word": "inevitable", "meaning": "adj.不可避免的 必然(发生)的", "id": 357, "count": 0 }, { "symbols": "'beibi", "word": "baby", "meaning": "adj.(形容用法)婴儿的 过小的 n.婴儿 孩子气的人 象婴儿的人 需特殊关心的事物 vt.溺爱 过度关心", "id": 1663, "count": 0 }, { "symbols": "'kæmərə", "word": "camera", "meaning": "n.照相机 摄影机 罗马教廷的财政部", "id": 906, "count": 0 }, { "symbols": "θrəun", "word": "throne", "meaning": "n.宝座 御座 王位 君主", "id": 1640, "count": 0 }, { "symbols": "streit", "word": "straight", "meaning": "adj. 直的 正直的 准的 坦率的 连续的 异性恋的 adv. 直 直接 笔直地 平正了 坦率的 连续不断地 n. 直的东西 传统的人", "id": 1360, "count": 0 }, { "symbols": "'ledʒənd", "word": "legend", "meaning": "n.传说 传奇 传奇人物 铭文 (地图或图片等的)说明 图例", "id": 370, "count": 0 }, { "symbols": "lu:z", "word": "lose", "meaning": "vt.失去 遗失 迷失 输掉 失败 损失 摆脱 vi.丢失 失败 [计算机] 失去", "id": 2059, "count": 0 }, { "symbols": "ə'fɔ:d", "word": "afford", "meaning": "vt. 担负得起(后果 损失等) 提供 给予", "id": 1887, "count": 0 }, { "symbols": "dɔ:m", "word": "dorm", "meaning": "n.(集体)宿舍", "id": 870, "count": 0 }, { "symbols": "'bægidʒ", "word": "baggage", "meaning": "n.行李", "id": 991, "count": 0 }, { "symbols": "'klɑ:srum", "word": "classroom", "meaning": "n.教室 课堂", "id": 265, "count": 0 }, { "symbols": "ni:d", "word": "need", "meaning": "vt.需要 必需 v.aux.需要 n.需要 必须 缺乏", "id": 891, "count": 0 }, { "symbols": "kəut", "word": "coat", "meaning": "n.外套 上衣 表皮 动物皮毛 一层 vt.外面覆盖 盖上毛衣", "id": 1057, "count": 0 }, { "symbols": "tʃi:z", "word": "cheese", "meaning": "n.乳酪 干酪 要求照相的人说的口形词 vt.停止", "id": 617, "count": 0 }, { "symbols": "'sə:vənt", "word": "servant", "meaning": "n.仆人 佣人 雇工", "id": 1877, "count": 0 }, { "symbols": "'sentəns", "word": "sentence", "meaning": "n.判决 句子 意见 宣判 刑罚 命题 vt.宣判 判决 使遭受", "id": 1750, "count": 0 }, { "symbols": "ri'vaiz", "word": "revise", "meaning": "vt.修订 校订 校正 修改 n.校订 修正 再校稿", "id": 2101, "count": 0 }, { "symbols": "gʌn", "word": "gun", "meaning": "n.枪 炮 手枪", "id": 1653, "count": 0 }, { "symbols": "bet", "word":"bet","meaning":"n.打赌 赌注 最大的可能 vi.下注 vt.打赌","id":1751,"count":0}],"code":200} 
		// },
      chooseItem(item,index){
        if(Array.isArray(item)){
          let Item=item[0]+item[1];
          if(equal(Item,this.arrTempHead[0].meaning)){
            console.log('正确');
          
            delectWrongWord(this.arrTempHead[0].id);
            this.opcative();
            this.arrMain();
          }
          else{
            console.log("错误");
            wrongWord(this.arrTemp[index].id).then((res)=>{
              console.log(res)
            });
            
            this.$refs.color[index].$el.style.backgroundColor="red";
          }
        }
        else{
             if(equal(item,this.arrTempHead[0].meaning)){
                 console.log('正确');
               
                 delectWrongWord(this.arrTempHead[0].id);
                 this.opcative();
                 this.arrMain();
             }
             else{
               console.log("错误");
               wrongWord(this.arrTemp[index].id).then((res)=>{
                 console.log(res)
               });
               this.$refs.color[index].$el.style.backgroundColor="red";
             }
        }
      },
      async getWordArr(){
        await getWrongWord().then((res)=>{
             this.arrShow=res.rows;
             this.arrShowFu=this.arrShow;
             // uni.setStorageSync("word",res);
        });
        this.pushArr(0);
      },
      
      /*恢复颜色*/
      opcative(){
        for(let i=0;i<4;i++){
          this.$refs.color[i].$el.style.backgroundColor="rgba(204,204,204,0.3)";
        }
      },   
      answer(){
        this.arrMain();
      },
      /*添加四个数组*/
      pushArr(o){
        let rank=ranker(this.rankSize);
        for(let i=0;i<4;i++){
          this.arrTemp.push(this.arrShow[rank[i]]);
        }
        let x=o;
        this.pushArrTempHead(x);
        console.log(this.pushArrTempHead(x));
        for(let i=0;i<4;i++)
        this.arrTempmeaning.push(sublevel(this.arrTemp[i].meaning));
      },
      /*解耦合*/
      pushArrTempHead(i){
        this.arrTempHead.push(this.arrTemp[ranker(4)[i]]);
      },
      /*判断是否包括*/
      isContain(){
        if(this.arrOld.includes(this.arrTempHead[0]))
        {
          return true;
        }
        return false;
      },
      /*
      *清空
      */
     arrEmpty(){
       this.arrTemp=[];
       this.arrTempmeaning=[];
       this.arrTempHead=[];
     },
     /*
     *正确存入过期数组
     */
     oldPush(arrTempHead){
       this.arrOld.push(arrTempHead[0]);
       console.log(this.arrOld);
     },
    /*
    *添加判断是否为未背单词,这里单词超过10个会开始多次循环，个人思路是循环超过五次就不动数组直接转换成背过的替换没被的
    */
    reciteWords(){
        this.pushArr(0);
          if(this.isContain()){
              this.arrEmpty();
              console.log('进入了重复');
              this.repeatCount++;
                if(this.repeatCount>5){
                  this.pushOldArr();
                }
                else{
                   this.reciteWords();
                }
          }
        this.repeatCount=0;
    },
     /*
     *Main
     */
     arrMain(){
       this.oldPush(this.arrTempHead);
       this.pushNewArr(this.arrTempHead[0]);
       this.arrEmpty();
       this.reciteWords();
     },
     /*从老的随机并添加一个新的*/
     pushOldArr(){
       let rank=ranker(this.arrOld.length);
       for(let i=0;i<4;i++){
         this.arrTemp.push(this.arrOld[rank[i]]);
       }
       console.log('进入了pushOldArr');
       console.log(this.arrTemp)
      
         /*添加新的还没写*/
        let ra1= ranker(this.arrShowFu.length);
        let ra2= ranker(4);
        this.arrTemp[ra2[0]]=this.arrShowFu[ra1[0]];
        this.arrTempHead[0]=this.arrShowFu[ra1[0]];
        for(let i=0;i<4;i++)
        this.arrTempmeaning.push(sublevel(this.arrTemp[i].meaning));
     },
     
     /*找到新数组*/
     pushNewArr(arr){
       console.log('进入了newarr')
       let element= arr;
        this.arrShowFu = this.arrShowFu.filter(item => item != element);
       if(this.arrShowFu.length==0){
         // uni.navigateTo({
         //   url:"/pages/succeed/succeed"
         // })
         uni.showModal({
           content:"今天复习完成",
           showCancel:false
         });
         uni.switchTab({
           url:"/pages/indexz/indexz"
         })
       }
     },
     
     /*正确过后插入oldword*/
     /*发给后端*/
     oldword(wordid1){
       console.log(wordid1)
       uni.http.post("/api/word/oldword",{wordid:wordid1,},{}).then((res)=>{
         console.log(res)
       })
     },
     
  },
  
  }
</script>

<style>
  .concert{
    display: flex;
    justify-content: center;
    align-items: center;
  }
	.content {
    height: 100%;
    width: 100%;
	background-image: url("../../static/indexback.png");
	background-size: 100% 100%;
	}
  .wordui{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
   
  }
  .wordui>view{
    color: azure;
    font-size: 60px;
  }
  .choicesum > .choice{
    height: 60px;
    width: 90%;
    /* height: 30%; */
    margin: auto;
    margin-top: 20px;
    box-shadow: 0px 2px 4px 0px ;
    border: 1px solid rgba(0, 0, 0, 1) ; 
    background-color: rgba(204, 204, 204, 0.3);
    font-weight: 900;
    border-radius: 10px;
  }
/*  	.choice:hover{
  		background-color: #C2171D;
  	}
	.choice:hover{
		
	} */
	
  .choicesum > .choice:active{
	  
     background-color: whitesmoke;
    /* border-radius:10px; */
	
  }
  
	.text-area {
		display: flex;
		justify-content: center;
    background-color: #8f8f94;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.under{
		width:90% ;
		height: 30px;
		font-size: 20px;
		color: black;
		font-weight: bold;
		margin-top: 105px;
		margin-left: 150px;
	}
  
</style>
